<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>天气API</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body>
		<div class="container">
			<div class="weather">
				<div class="header">
					<input class="ipt" type="text" placeholder="请输入城市名称" value="泊头" />
					<span>07:30更新 | 数据来源 中央气象台</span>
				</div>
				<div class="nav">
					<ul class="nav-top">
						<li>
							<a href="#">今天</a>
						</li>
						<li class="active">
							<a href="#">7天</a>
						</li>
						<li>
							<a href="#">8-15天</a>
						</li>
						<li>
							<a href="#">40天</a>
						</li>
					</ul>
					<ul class="nav-main">
						<li class="active">
							<h1></h1>
							<p class="type"></p>
							<p class="heat">
								<span class="max"></span>/
								<span class="min"></span>℃
							</p>
							<!--几级风-->
							<p class="fx"></p>
						</li>
						<li>
							<h1></h1>
							<p class="type"></p>
							<p class="heat">
								<span class="max"></span>/
								<span class="min"></span>℃
							</p>
							<!--几级风-->
							<p class="fx"></p>
						</li>
						<li>
							<h1></h1>
							<p class="type"></p>
							<p class="heat">
								<span class="max"></span>/
								<span class="min"></span>℃
							</p>
							<!--几级风-->
							<p class="fx"></p>
						</li>
						<li>
							<h1></h1>
							<p class="type"></p>
							<p class="heat">
								<span class="max"></span>/
								<span class="min"></span>℃
							</p>
							<!--几级风-->
							<p class="fx"></p>
						</li>
						<li>
							<h1></h1>
							<p class="type"></p>
							<p class="heat">
								<span class="max"></span>/
								<span class="min"></span>℃
							</p>
							<!--几级风-->
							<p class="fx"></p>
						</li>
						<li>
							<h1></h1>
							<p class="type"></p>
							<p class="heat">
								<span class="max"></span>/
								<span class="min"></span>℃
							</p>
							<!--几级风-->
							<p class="fx"></p>
						</li>
						<li>
							<h1></h1>
							<p class="type"></p>
							<p class="heat">
								<span class="max"></span>/
								<span class="min"></span>℃
							</p>
							<!--几级风-->
							<p class="fx"></p>
						</li>
					</ul>
				</div>
				<!--分时段预报-->
				<div class="forecast">
					<h3>分时段预报</h3>
					<ul class="time">
						<li>
							<time class="active"></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
						<li>
							<time></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
						<li>
							<time></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
						<li>
							<time></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
						<li>
							<time></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
						<li>
							<time></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
						<li>
							<time></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
						<li>
							<time></time>
							<!--温度-->
							<p class="temperature"><span></span>℃</p>
							<!--风向-->
							<p class="winf"></p>
							<!--几级风-->
							<p class="level"></p>
						</li>
					</ul>
				</div>
				<!--生活指数-->
				<div class="life">
					<h3>生活指数</h3>
					<ul>
						<li>
							<div class="life-left">
								<i class="one"></i>
								<p>紫外线指数</p>
							</div>
							<div class="life-right">
								<span>弱</span>
								<p>辐射较弱，涂擦SPF12-15、PA+护肤品。</p>
							</div>
						</li>
						<li>
							<a href="#">
								<div class="life-left">
									<i class="two"></i>
									<p>减肥指数</p>
								</div>
								<div class="life-right">
									<span>弱</span>
									<p>辐射较弱，涂擦SPF12-15、PA+护肤品。</p>
								</div>
								<i class="seven"></i>
							</a>
						</li>
						<li>
							<div class="life-left">
								<i class="there"></i>
								<p>健臻·血糖指数</p>
							</div>
							<div class="life-right">
								<span>弱</span>
								<p>辐射较弱，涂擦SPF12-15、PA+护肤品。</p>
							</div>
						</li>
						<li>
							<a href="#">
								<div class="life-left">
									<i class="four"></i>
									<p>穿衣指数</p>
								</div>
								<div class="life-right">
									<span>弱</span>
									<p>辐射较弱，涂擦SPF12-15、PA+护肤品。</p>
								</div>
								<i class="seven"></i>
							</a>
						</li>
						<li>
							<div class="life-left">
								<i class="five"></i>
								<p>洗车指数</p>
							</div>
							<div class="life-right">
								<span>弱</span>
								<p>辐射较弱，涂擦SPF12-15、PA+护肤品。</p>
							</div>
						</li>
						<li>
							<div class="life-left">
								<i class="six"></i>
								<p>空气污染扩散指数</p>
							</div>
							<div class="life-right">
								<span>弱</span>
								<p>辐射较弱，涂擦SPF12-15、PA+护肤品。</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="script.js"></script>
	</body>

</html>